<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查询</title>
</head>	
<body>
	&nbsp;
	<a href="{% url 'demo:upload' %}"><input name="" type="button" value="上传页面" /></a>&nbsp;&nbsp;
	<a href="/logout/"><input name="" type="button" value="退出"/></a>
	
	<div id="table1">
		<table border="1px" width="300px" cellspacing="0px" align="center">
			<thead>
				<tr>
					<th>排名</th>
					<th>客户端</th>
					<th>分数</th>
				</tr>
			</thead>

			<tbody>
			{% for item in context.scores %}
				<tr>
					<td>{{ item.ranking }}</td>
					<td>{{ item.client }}</td>
					<td>{{ item.score }}</td>
				</tr>	
			{% endfor %}
			<tr>
				<td>{{ uscore.ranking }}</td>
				<td>{{ uscore.client }}</td>
				<td>{{ uscore.score }}</td>
			</tr>
			</tbody>
		</table>
	</div>
			
	<h5>请输入要查询名次范围：第
		<input type="text" id = "start" name="start" placeholder="请输入起始名次，例如：10">
		至
		<input type="text" id = "end" name = "end" placeholder="请输入终止名次，例如:20">名。&nbsp;&nbsp;
		<input name = "submit" id = "submit" type="button" value="查询" onclick="return f()"/>
	</h5>
	<div id = "start_err" style="color: red;"></div>
	<div id = "end_err" style= "color: red;"></div>
	<div id ="table2" style="display:none">
		<table border="1px" width="300px" cellspacing="0px" align="center">
			<thead>
				<tr>
					<th>排名</th>
					<th>客户端</th>
					<th>分数</th>
				</tr>
			</thead>
			
			<tbody id="tbody2"></tbody>
			<tr>
				<td>{{uscore.ranking}}</td>
				<td>{{user}}</td>
				<td>{{uscore.score}}</td>
			</tr>		
		</table>
	</div>
	

	<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	
	<script type = "text/javascript">
		var context2; 
		function f(){
			var start = $('#start').val();
			var end = $('#end').val();
			var flag = true; 
			if(start < 0) {
				$('start_err').text("起始名次不支持负数!"); 
				flag = false; 
			}
			if(end < 0){
				$('end_err').text('终止名次不支持负数!');
				flag = false; 
			}
			if(flag){
				$.ajax({
					url: "/show/", 
					data: {'start': start, 'end' : end}, 
					type : "POST", 
					success: function(result){
						if (result["status"] == "ok"){
							$('#table1').hide(); 
							$('#table2').show(); 
							context2 = result['context']; 
							$('#tbody2').empty(); 
							$.each(context2['scores'], function(index, item){
								$('#tbody2').append('<tr><td>'+ item['ranking'] + "</td><td>" + 
								item['client'] + '</td><td>' + item['score'] + "</td></tr>"); 
							});
						}
						else {
							alter('请输入合法的名次！名次为数值型且为整数。')
						}
					},
				})
			}
			return flag; 
		}	
	</script>
</body>